<template>
    <div>
        <el-table :data="tableData" border style="width: 100%" height="450px">
            <el-table-column prop="tag_id" label="标签id" width="180"> </el-table-column>
            <el-table-column prop="cate" label="货物类型" width="180" :formatter="cargo_filter"> </el-table-column>
            <el-table-column prop="creator" label="创建人" :formatter="creator_filter"> </el-table-column>
            <el-table-column prop="user" label="分配用户" :formatter="user_filter"> </el-table-column>
            <el-table-column prop="create_time" label="创建时间"> </el-table-column>
            <el-table-column prop="update_time" label="更新时间"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="update(scope.row)">编辑</el-button>
                    <el-button type="text" @click="del(scope.row)" v-if="status == 1">归档</el-button>
                    <el-button type="text" @click="del(scope.row)" v-if="status == 0">激活</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        >
        </el-pagination>
        <el-button type="success" v-if="status == 1" @click="get_all">查看归档标签</el-button>
        <el-button type="success" v-if="status == 0" @click="get_all">查看全部标签</el-button>
    </div>
</template>

<script>
import { tags, del_tags, userinfo, cargotype } from '../../api/api';
export default {
    data() {
        return {
            tableData: [],
            total: 0,
            currentPage: 0,
            size: 10,
            page: 1,
            cargo_list: [],
            user_list: [],
            status: 1
        };
    },
    methods: {
        // 获取所有标签信息
        get_all() {
            tags({ params: { size: this.size, page: this.page, status: this.status } }).then(res => {
                console.log(res)
                this.tableData = res.data.data;
                this.total = res.data.total;
            });
        },
        // 一页多少条数据
        handleSizeChange(val) {
            tags({ params: { size: val, page: this.page, status: this.status } }).then(res => {
                this.tableData = res.data.data;
                this.total = res.data.total;
                this.size = val;
            });
        },
        // 跳转到多少页
        handleCurrentChange(val) {
            tags({ params: { page: val, size: this.size, status: this.status } }).then(res => {
                this.tableData = res.data.data;
                this.total = res.data.total;
                this.page = val;
            });
        },
        // 编辑货物类型
        update(row) {
            // put_cargotype({ cid: row.id }).then(res => {
            //     this.$message(res.data.msg);
            //     // 重新获取
            //     this.$router.push('/cargotype');
            // });
            this.$router.push({ path: '/addtags', query: { user: row.user, cate: row.cate, tag_id: row.tag_id, tid: row.id } });
        },
        // 删除
        del(row) {
            del_tags({ data: { tid: row.id } }).then(res => {
                if (res.data.code == 200) {
                    this.$message(res.data.msg);
                    // 重新获取
                    this.get_all();
                }
            });
        },
        // 获取所有货物类型信息
        get_cargo_info() {
            cargotype().then(res => {
                this.cargo_list = res.data.data;
            });
        },
        // 货物类型过滤器
        cargo_filter(row) {
            for (let i of this.cargo_list) {
                if (i.id == row.cate) {
                    return row.cate == i.id ? i.cargotype : '未知';
                }
            }
        },
        // 获取所有用户信息
        get_user_info() {
            userinfo().then(res => {
                this.user_list = res.data.data;
            });
        },
        // 用户过滤器
        user_filter(row) {
            for (let i of this.user_list) {
                if (i.id == row.user) {
                    return row.user == i.id ? i.username : '未知';
                }
            }
        },
        // 创建人过滤器
        creator_filter(row) {
            for (let i of this.user_list) {
                if (i.id == row.creator) {
                    return row.creator == i.id ? i.username : '未知';
                }
            }
        }
    },
    mounted: function() {
        this.get_all();
        this.get_cargo_info();
        this.get_user_info();
    }
};
</script>

<style>
</style>